Fix/300 피커 버그 수정 #305
Fix/300 피커 버그 수정 #305
Conversation
- 친구의 프로필 이미지 response 값이 null이면 기본 이미지를 띄워주게 수정 - 여러명을 선택했을 때 띄워주는 이미지 경로 절대 경로로 수정 (#300)
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/store/useSelectedFriendsStore.ts
Outdated
| const peopleImgUrl = 'src/assets/profile_people.png'; | ||
| const peopleImgUrl = | ||
| 'https://github.com/KakaoFunding/front-end/blob/dev/src/assets/profile_people.png?raw=true'; | ||
| const friendsDefaultImgUrl = | ||
| 'https://github.com/KakaoFunding/front-end/blob/dev/src/assets/profile_default.png?raw=true'; |
There was a problem hiding this comment.
이거 경로 문제가 왜 생기는지 알겠네요 !
기존 url이 src/assets/img.png처럼 되어 있으면 배포 환경에서 오류가 납니다.
assets/img.png처럼 되어 있어야 해요.
이건 저희 빌드하면 나오는 결과물 스크립트 일부인데요. 보시면 경로가 src/assets/...로 되어 있습니다. 그런데 실제로 빌드해보면 src라는 폴더는 없어요. 그러니까 이 부분 이미지가 깨지게 되는 거죠.
실제로 빌드하면 위 사진처럼 dist라는 폴더가 생깁니다. 저희가 아마존에 배포하는 정적 파일들이 바로 dist 폴더를 이루는 파일들이에요. dist 폴더 안에는 assets라는 폴더가 있고, 그 안에는 빌드 결과물 스크립트나 저희가 저장한 이미지 파일들이 있습니다. 이 파일들은 빌드(압축)하는 과정에서 이름이 바뀌어요. 아래 사진처럼요.
보시면 경로가 assets/바뀐파일이름.png로 되어 있습니다. 이런 이미지는 깨지지 않습니다. 왜냐하면 배포환경에 해당 경로가 존재하기 때문입니다. (dist 폴더를 이루는 파일&폴더들이 배포환경에 올라감 => 거기에는 assets/바뀐파일이름.png도 존재함 => 정상적으로 이미지를 가져옴)
아마 이렇게 되는 이유는 저희가 이렇게 설정해서일 거예요. (vite.config 등)
원인과 해결 방법을 알았으니 assets/img.png처럼 바꾸는 것은 어떨까요?
지금처럼 아예 이미지 url을 사용하는 방식의 경우, 이미지 url을 저희가 관리하는 게 아니라서 변경되거나 삭제될 우려도 있고, 그러면 이미지가 또 깨지게 되니까요. 또한 보기에도 좋지 않다고 생각합니다...!
There was a problem hiding this comment.
오 감사합니다!
적용해서 올리겠습니다!
There was a problem hiding this comment.
이 방법으로 적용했을 때 로컬에서는 깨져서 나오기 때문에 실제로 적용이 되는지는 배포가 되어야 확인할 수 있어 보입니다!
There was a problem hiding this comment.
이미지 가져오실 때 import로 하시면 로컬에서도 깨지지 않고 배포했을 때도 깨지지 않을 거예요
// 잘못된 예
const errorImage = 'assets/notFound.png'; // 그냥 문자열임
// 올바른 예
import ErrorImage from 'assets/notFound.png';
<img src={ErrorImage} alt="error"/>There was a problem hiding this comment.
아... 저 여태 계속 const로 되어 있는걸 인식하지 못하고 있었네요... ㅜ
감사합니다!
|
저도 미림님 말씀처럼 string 타입을 지정하되 빈 문자열인지 아닌지 체크해주는 로직을 추가하는것이 좋은 방법이라고 생각합니다. |
|
@devkyoung2 @uraflower |
#️⃣연관된 이슈
close: #300
📝작업 내용
null을 전달해주면서 이미지가 표시되지 않는 문제 수정reissue404 response에서 선택한 친구를 초기화하는 로직 추가🙏리뷰 요구사항(선택)
PickerResponseData중nullable값을 수정할지 고민인데 다른 분들 생각이 궁금합니다.제가 고민하는 이유는 따로
null을 지정하지 않아도''이런식으로 데이터를 넘겨주기 때문입니다!